<!-- 配送员选择弹窗 -->
<template>
  <el-dialog v-model="dialogVisible" title="商品选择" width="1200px" draggable align-center>
    <div class="main-box">
      <TreeFilter
        label="name"
        title="商品分类"
        :data="treeFilterData"
        :default-value="initParam.goodsSetId"
        @change="changeTreeFilter"
      />
      <div class="table-box">
        <ProTable
          ref="proTable"
          title="供应商列表"
          highlight-current-row
          :columns="columns"
          :request-api="getGoodsTreeEntity"
          height="400px"
        >
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Select" @click="selectCustom(scope.row)">选择</el-button>
          </template>
        </ProTable>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Select } from "@element-plus/icons-vue";
import { Good } from "@/api/interface";
import { tfLabel } from "@/utils/serviceDict";
import { getGoodsListTree, getGoodsTreeEntity } from "@/api/modules/good";
import { ElMessage } from "element-plus";
import TreeFilter from "@/components/TreeFilter/index.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "goodsId", label: "商品id", width: 80, sortable: true, search: { el: "input" } },
  { prop: "goodsName", label: "商品名", width: 120, search: { el: "input" } },
  { prop: "measureUnit", label: "计量单位" },
  { prop: "goodsPrice", label: "商品原价" },
  { prop: "goodsDiscount", label: "商品折扣" },
  { prop: "goodsCost", label: "商品成本" },
  { prop: "goodsModel", label: "商品型号" },
  { prop: "goodsShelfLife", label: "商品保质期限" },
  { prop: "optReturn", label: "可否退货", enum: tfLabel, tag: true },
  { prop: "optReplace", label: "可否换货", enum: tfLabel, tag: true },
  { prop: "goodsRemark", label: "商品备注信息" },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
];

onMounted(() => {});

const initParam = reactive({ goodsSetId: 0, name: "", level: 1 });

const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getGoodsListTree();
  treeFilterData.value = data;
  initParam.goodsSetId = treeFilterData.value[0].id;
};

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  ElMessage.success("请注意查看请求参数变化 🤔");
  proTable.value!.pageable.current = 1;
  initParam.goodsSetId = val.id;
  initParam.level = val.level;
};

const dialogVisible = ref(false);

// 接收父组件传过来的参数
const open = () => {
  dialogVisible.value = true;
  getTreeFilter();
};

// const handleSubmit = () => {};
const emit = defineEmits(["get-goods"]);
const selectCustom = async (row: Good.GoodsEntity) => {
  emit("get-goods", row);
  dialogVisible.value = false;
};

defineExpose({
  open
});
</script>
